<script setup lang="ts">
import {businessCreateItem, businessCreateShop, businessListShops, listShops} from "../network/api.ts";
import {ref} from "vue";
import Footer from "../components/BusinessFooter.vue";
import router from "../Router";

let username = ref()
let shopName = ref("")
let business = ref({
  id:sessionStorage.getItem("userId")
})
let shopArr = ref()
businessListShops(business.value).then(res=>{
  // console.log(res.data)
  shopArr.value = res.data.shops
})
console.log("sessionStorage.getItem('userId'):",sessionStorage.getItem("userId"))
console.log("sessionStorage.getItem('username'):",sessionStorage.getItem("username"))
username.value = sessionStorage.getItem("username")


function createShop(){
  businessCreateShop(sessionStorage.getItem("userId"),shopName.value).then(res=>{
    businessListShops(business.value).then(res=>{
      console.log(res.data)
      shopArr.value = res.data.shops
    })
  })
}
function toShopItemPage(index, row){
  console.log(index)
  router.push({
    path:"/business/listShopItems",
    query:{
      shopId:shopArr.value[index].id,
      shopName:row.shopName
    }
  })
}


</script>

<template>
  <header class="title flex justify-center items-center bg-blue border-blue-600 ">
    <div class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}}家</p>
      <h1>Shops</h1>
    </div>
  </header>

  <div class="flex mt-1.5vw  items-center justify-center w-full gap-2vw ">
    <el-input placeholder="input a shop name to create a shop"
              class="mx-1vw h-10vw mt-2vw"
              v-model="shopName"
    ></el-input>
    <el-button type="primary" class="mt-3vw mr-2vw"
                @click="createShop"
    >
      创建商店
    </el-button>
  </div>

  <el-scrollbar class="mt-3vw w-full">
    <el-table :data="shopArr" height="250" style="width:100%"
    >
      <el-table-column type="index" width="22"/>
      <el-table-column  prop="shopName" label="门店名称" width="115" align="center"/>
      <el-table-column prop="createTime" label="创建时间" width="150" align="center"/>
      <el-table-column label="操作"  width="105" align="center">
        <template #default="scope">
          <el-button type="primary" class="mt-3vw"
                     @click="toShopItemPage(scope.$index, scope.row)"
          >
            进入
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-scrollbar>

  <Footer></Footer>


</template>

<style scoped>

</style>